<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="add-pannel">
        <p>会员手机号： <input type="text" class="tel"></p>
        <p>真实姓名： <input type="text" class="truename"></p>
        <p>余额： <input type="text" class="account"> </p>
        <p><button class="add">添加会员</button></p>
        <!--
            GET,POST请求区别
            https://blog.csdn.net/tryheart/article/details/107323671

            post请求前端实现方式
                1、xhr.open()中的提交方式设置为"post" : xhr.open("post",url,true)
                2、url地址后不能附加数据，而是在xhr.send()中附加数据
                     xhr.send("tel=1&truename=1")
                3、在xhr.send之前要设置请求头
                    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            post请求的服务端:
                1、 用$_POST["tel"]来获取post请求提交的数据

            get post 最重要的区别
                1、get请求的参数附加在url地址后，而post请求的参数附加在请求体中
                2、get请求是明文的，不安全。post请求相对安全
                3、get请求因为浏览器的限制名字富长度不能太大，而post没有限制
        -->

        <script>
            let tel = document.querySelector(".tel");
            let name = document.querySelector(".truename");
            let account = document.querySelector(".account");
            let add = document.querySelector(".add");

            add.onclick = function() {
                // 参数
                let params = `tel=${tel.value}&truename=${name.value}&account=${account.value}`;

                let url = './post.php';
                let xhr = new XMLHttpRequest();
                xhr.open("post", url, true);
                // 设置请求头
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send(params);

                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        let data = JSON.parse(xhr.responseText);
                        if (data.code == 0) {
                            alert(data.msp);
                        }
                    }
                }
            }
        </script>
    </div>
</body>

</html>